Border radius

Read all border variables

Default border radius scale

Ravenbright border radius variable is defined globally and begin with the prefix --rbrh-radius-{size}. This variable can be used and customized on various components.

Variable	Rems
--rbrh-radius-xs	0.25rem
--rbrh-radius-sm	0.5rem
--rbrh-radius-md	0.75rem
--rbrh-radius-lg	1rem
--rbrh-radius-xl	1.25rem
--rbrh-radius-circle	100rem

Usage

To use the border-radius, you can place the CSS variables inside component selector.

.card {
  /*Use the border radius variables*/
  border-radius: var(--rbrh-radius-sm);
}

Customizing

To modify the border-radius value, you can edit these variables in CSS-variables:

/* Border radius */
  --rbrh-radius-circle: 100rem;
  --rbrh-radius-xl: 1.25rem;
  --rbrh-radius-lg: 1rem;
  --rbrh-radius-md: .75rem;
  --rbrh-radius-sm: .5rem;
  --rbrh-radius-xs: .25rem;

tip

Checkout the complete tutorial on how to customize & add new design variable in CSS variables